<template>
  <div>
    <div v-if="!ifShowSearch">
      <div class="report-sale-title">
        <div class="report-sale-title-left subheading-heavy">
          <img class="icon-16" src="@/static/icon/16px_arrow_left.png" @click="changeNowTimes(-1)" alt=""/>
          <span class="">{{ nowString }}</span>
          <img class="icon-16" src="@/static/icon/16px_arrow_right.png" @click="changeNowTimes(1)" alt=""/>
        </div>
        <div v-if="type === 1" class="report-sale-title-right paragraph-p3-light color-grey"
             @click="ifShowCustomize = true">
          自定义时间段
        </div>
      </div>
      <div :key="key.reportSaleItem">
        <report-sale-item v-for="(reportSaleItem, i) of reportSaleItemList"
                          :key="'reportSaleItem' + i"
                          :item="reportSaleItem"
                          :order-detail-url="type === 2 ? orderDetailUrl : '' "
        ></report-sale-item>
      </div>
      <van-action-sheet v-model="ifShowCustomize">
        <report-sale-select
            :type=1
            v-on:backEvent="ifShowCustomize = !ifShowCustomize"
            v-on:reportSelectConfirmEvent="customizeConfirm"
        ></report-sale-select>
      </van-action-sheet>
    </div>
    <div v-if="ifShowSearch">
      <div class="report-sale-title">
        <div class="report-sale-title-left"></div>
        <div class="report-sale-title-right paragraph-p3-light color-grey" @click="clearCustomize">
          清除自定义
        </div>
      </div>
      <report-sale-item :key="key.searchItem" :item="reportSaleItem"></report-sale-item>
    </div>

  </div>
</template>

<script>
import {ActionSheet, Toast} from 'vant'
import ReportSaleItem from '@/components/report/sale/item'
import ReportSaleSelect from '@/components/report/sale/select'
import {getSaleSummaryByMonth, getSaleSummaryBySelectedDate, viewTraderSaleSummaryCurrentMonth} from "@/request/api";

export default {
  name: "ReportSaleTotal",
  props: {
    type: {type: Number, default: () => (1)},
    userId: {type: String, default: () => ('')},
  },
  components: {
    [ActionSheet.name]: ActionSheet,
    ReportSaleItem,
    ReportSaleSelect,
  },
  data() {
    return {
      orderDetailUrl: this.GLOBAL.pathSetting.report.orderDetail,
      nowTime: new Date,
      nowString: '',
      year: '',
      month: '',
      ifShowCustomize: false,
      ifShowSearch: false,
      reportSaleItemList: [],
      reportSaleItem: {},
      key: {
        searchItem: new Date().getTime(),
        reportSaleItem: new Date().getTime(),
      }
    }
  },
  mounted() {
    this.setNowTimes()
    this.changeNowTimes(0)

  },
  methods: {
    setNowTimes() {
      this.year = String(this.nowTime.getFullYear())
      this.month = String(this.nowTime.getMonth() + 1)
      this.nowString = this.year + '年' + this.month + '月'
    },
    changeNowTimes(i) {
      this.nowTime.setMonth(this.nowTime.getMonth() + i)
      this.setNowTimes()
      const loginUser = this.$baseJS.getLoginUser()
      if (!loginUser.isAdmin) {
        this.userId = loginUser.id
      }
      if (this.userId) {
        this.viewTraderSaleSummaryCurrentMonth()
      } else {
        this.getSaleSummaryByMonth()
      }
    },
    customizeConfirm(timePeriod) {
      this.$loading.show()
      this.ifShowSearch = true
      this.reportSaleItem = {}
      let param = {
        date_from: timePeriod[0],
        date_to: timePeriod[1]
      }
      getSaleSummaryBySelectedDate(param).then(res => {
        const {State, Data, Msg} = res
        if (State) {
          const {start_date, end_date, sale_count, sale_price, profit, status} = Data
          this.reportSaleItem = {
            startDate: start_date,
            endDate: end_date,
            fieldValue: [sale_count, sale_price, profit],
            active: status === '进行中',
            showDetail: status !== 0,
          }
          this.key.searchItem = new Date().getTime()
        } else {
          Toast(Msg)
        }
        this.$loading.close()
      }).catch( () => { this.$loading.close() })
    },
    clearCustomize() {
      this.ifShowCustomize = false
      this.ifShowSearch = false
    },
    getSaleSummaryByMonth() {
      this.$loading.show()
      let param = {
        year: this.year,
        month: this.month
      }
      getSaleSummaryByMonth(param).then(res => {
        const {State, Data, Msg} = res
        if (State) {
          this.reportSaleItemList = new Array()
          Data.forEach(monthSale => {
            const {start_date, end_date, sale_count, sale_price, profit, status} = monthSale
            const monthSaleItem = {
              startDate: start_date,
              endDate: end_date,
              fieldValue: [
                sale_count,
                sale_price,
                profit
              ],
              active: status === '进行中',
              showDetail: status !== 0,
            }
            this.reportSaleItemList.push(monthSaleItem)
          })
          this.key.reportSaleItem = new Date().getTime()
        } else {
          Toast(Msg)
        }
        this.$loading.close()
      }).catch( () => { this.$loading.close() })
    },
    viewTraderSaleSummaryCurrentMonth() {
      if (this.userId) {
        this.$loading.show()
        let param = {
          pathParam: this.userId,
          year: this.year,
          month: this.month
        }
        viewTraderSaleSummaryCurrentMonth(param).then(res => {
          const {State, Data, Msg} = res
          if (State) {
            this.reportSaleItemList = new Array()
            Data.forEach(monthSale => {
              const {start_date, end_date, sale_count, retail_total, commission, status} = monthSale
              const monthSaleItem = {
                startDate: start_date,
                endDate: end_date,
                fieldValue: [
                  sale_count,
                  retail_total,
                  commission
                ],
                active: status === '进行中',
                showDetail: status !== 0,
              }
              this.reportSaleItemList.push(monthSaleItem)
            })
            this.key.reportSaleItem = new Date().getTime()
          } else {
            Toast(Msg)
          }
          this.$loading.close()
        }).catch( () => { this.$loading.close() })
      }
    },
  },
}
</script>

<style scoped>
.report-sale-title {
  margin: 16px 16px;
  display: flex;
}

.report-sale-title-left {
  width: 50%;
  height: 24px;
}

.report-sale-title-left > span {
  margin: 0 16px;
}

.report-sale-title-right {
  height: 18px;
  width: 50%;
  text-align: right;
  text-decoration: underline;
}

</style>